<!--
 * @Copyright: Copyright (C) 2019-2029 Huawei Inc
 * @Project: FTTX pyAutoTest
 * @Author: l00293140
 * @Date: 2021-01-14 21:25:03
 * @LastEditors: l00293140
 * @LastEditTime: 2021-01-15 10:56:04
 * @Description: file content
-->
<template>
    <div class="container">
        <div class="row">
            <div class="col-sm-10">
                <h1>Books</h1>
                <alert :message=message v-if="showMessage"></alert>
                <hr/><br/><br/>
                <button type="button" class="btn btn-success btn-sm" v-b-modal.book-modal>Add Book</button>
                <br/><br/>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Title</th>
                            <th scope="col">Author</th>
                            <th scope="col">Read?</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(book, index) in books" :key="index">
                            <td>{{book.title}} </td>
                            <td>{{book.author}}</td>
                            <td>
                                <span v-if="book.read">Yes</span>
                                <span v-else>No</span>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-warning btn-sm" @click="onUpdateBook(book, index)"  v-b-modal.update-book-modal>Update</button>
                                    <button type="button" class="btn btn-danger btn-sm ml-2" @click="onRemoveBook(book, index)">Delete</button>
                                </div>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <b-modal ref="addBookModal" id="book-modal" title="Add a new book" hide-footer>
            <b-form @submit="onSubmit" @reset="onReset" class="w-100">
              <b-form-group id="form-title-group" label="Title:" label-for="form-title-input">
                  <b-form-input id="update-form-title-input" type="text" v-model="addBookForm.title" required placeholder="Enter title">
                  </b-form-input>
              </b-form-group>
              <b-form-group id="form-author-group" label="Author:" label-for="form-author-input">
                  <b-form-input id="form-author-input" type="text" v-model="addBookForm.author" required placeholder="Enter author">
                  </b-form-input>
              </b-form-group>
              <b-form-group id="form-read-group">
                  <b-form-checkbox-group v-model="addBookForm.read" id="form-checks">
                      <b-form-checkbox value="true" checked="true" >Read?</b-form-checkbox>
                  </b-form-checkbox-group>
              </b-form-group>
              <b-button-group>
                  <b-button type="submit" variant="primary">Submit</b-button>
                  <b-button type="reset" variant="danger">Reset</b-button>
              </b-button-group>
            </b-form>
        </b-modal>

        <b-modal ref="updateBookModal" id="update-book-modal" title="Update book info" hide-footer>
            <b-form @submit="onUpdateSubmit" @reset="onCancle" class="w-100">
              <b-form-group id="update-form-title-group" label="Title:" label-for="form-title-input">
                  <b-form-input id="update-form-title-input" type="text" v-model="updateBookForm.title" required placeholder="Enter title">
                  </b-form-input>
              </b-form-group>
              <b-form-group id="update-form-author-group" label="Author:" label-for="form-author-input">
                  <b-form-input id="update-form-author-input" type="text" v-model="updateBookForm.author" required placeholder="Enter author">
                  </b-form-input>
              </b-form-group>
              <b-form-group id="update-form-read-group">
                  <b-form-checkbox-group v-model="updateBookForm.read" id="update-form-checks">
                      <b-form-checkbox value="true">Read?</b-form-checkbox>
                  </b-form-checkbox-group>
              </b-form-group>
              <b-button-group>
                  <b-button type="submit" variant="primary">Submit</b-button>
                  <b-button type="reset" variant="danger">Reset</b-button>
              </b-button-group>
            </b-form>
        </b-modal>
    </div>
</template>

<script>
import axios from 'axios';
import Alert from '@/components/Alert'

export default {
  data() {
    return {
      books: [],
      addBookForm: {
          title: "",
          author: "",
          read: []
      },
      message: "",
      showMessage: false,
      updateBookForm: {
          title: "",
          author: "",
          read: []
      },
      preData: {
          title: "",
          author: "",
          read: []
      }
    };
  },
  components: {
      alert: Alert,
  },
  methods: {
    getBooks() {
      const path = 'http://localhost:5001/get_books'
      axios
        .get(path)
        .then(res => {
          this.books = res.data.books;
        })
        .catch(error => {
          console.error(error);
        });
    },
    onSubmit(evt) {
        evt.preventDefault();
        this.$refs.addBookModal.hide();
        let read = false;
        console.log(this.addBookForm.read)
        if (this.addBookForm.read[0]) read = true;
        const payload = {
            title: this.addBookForm.title,
            author: this.addBookForm.author,
            read: read
        };
        this.addBook(payload)
        this.initForm()
    },
    addBook(payload) {
        const path = 'http://localhost:5001/add_book'
        let post_data = payload
        axios
          .post(path, post_data)
          .then(() => {
              this.getBooks();
              this.message = "Book added!"
              this.showMessage = true
          })
          .catch(error => {
              console.log(error);
              this.getBooks();
          });
    },
    onReset(evt) {
        evt.preventDefault();
        this.$refs.addBookModal.hide();
        this.initForm();
    },
    initForm() {
        this.addBookForm.title = "";
        this.addBookForm.author = "";
        this.addBookForm.read = [];
    },
    onRemoveBook(book, index, evt){
        const path = 'http://localhost:5001/remove_book'
        let post_data = {
            title: book.title,
            author: book.author,
            read: book.read
            }
        axios
          .post(path, post_data)
          .then(() => {
              this.getBooks();
              this.message = "Book removed!"
              this.showMessage = true
          })
          .catch(error => {
              console.log(error);
              this.getBooks();
          });

    },
    // 单机“Update”按钮，根据选中条目，自动填充模态框的值
    onUpdateBook(book, index, evt){
        this.preData.title = this.updateBookForm.title = book.title
        this.preData.author = this.updateBookForm.author = book.author
        if (Boolean(book.read))
            this.preData.read[0] = this.updateBookForm.read[0] = true
        else
            this.preData.read[0] = false
    },
    onUpdateSubmit(evt) {
        evt.preventDefault();
        this.$refs.updateBookModal.hide();
        let preRead = (this.preData.read[0])? true:false;
        console.log(this.updateBookForm.read)
        let newRead = (this.updateBookForm.read[0])? true:false;
        let preData = {
            title: this.preData.title,
            author: this.preData.author,
            read: preRead
        }
        let newData = {
                title: this.updateBookForm.title,
                author: this.updateBookForm.author,
                read: newRead
            }

        if (this.publicMethod.objEquals(preData, newData)){
            this.message = "No need update!"
            this.showMessage = true
        }
        else{
            const payload = {
                pre: preData,
                new: newData
            };
            this.updateBook(payload)
            this.initForm()
        }
    },
    updateBook(payload) {
        const path = 'http://localhost:5001/update_book'
        let post_data = payload
        axios
          .post(path, post_data)
          .then(() => {
              this.getBooks();
              this.message = "Book updated!"
              this.showMessage = true
          })
          .catch(error => {
              console.log(error);
              this.getBooks();
          });
    },
    onCancle(evt) {
        evt.preventDefault();
        this.$refs.updateBookModal.hide();
        this.initForm();
    }
  },
  created() {
    this.getBooks();
  }
};
</script>